<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <head>
        <title>客户信息列表</title>
        <spring:url value="/resources/jquery-easyui-1.5.3/themes/default/easyui.css"
                    var="easyuiCss"/>
        <link href="${easyuiCss}" rel="stylesheet"/>

        <spring:url value="/resources/jquery-easyui-1.5.3/themes/icon.css"
                    var="easyuiIcon"/>
        <link href="${easyuiIcon}" rel="stylesheet"/>

        <script src="<c:url value="/resources/jquery-easyui-1.5.3/jquery.min.js" />"></script>

        <script src="<c:url value="/resources/jquery-easyui-1.5.3/jquery.easyui.min.js" />"></script>

        <script src="<c:url value="/resources/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js" />"></script>
        <style>
            input checkbox {
                white-space: nowrap;
                font-size: 1.5em;
                zoom: 160%;
            }

            span {

                font-size: 18px;
                margin-left: 1.5%;
            }

            th {
                white-space: nowrap;
                align: center;
                text-align: center;
                margin: 0px auto;
            }
        </style>

    </head>
<body>
<table id="dg" class="easyui-datagrid" title="功能信息列表" style="height:500px" data-options="
            fit:true,
            rownumbers:true,
            autoRowHeight:true,
            pagination:true,
            SingleSelect:false,
            pageSize:20,
            pageList: [20, 30, 50],
            url:'<%=request.getContextPath()%>/customer/list',
            method:'get',
            toolbar:'#tb'">
    <thead>
    <tr>
        <th field="cb" checkbox="true"></th>
        <th field="username">用户名</th>
        <th field="company">公司名称</th>
        <th field="positionlevel">职位级别</th>
        <th field="sex">性别</th>
        <th field="type">客户类型</th>
        <th field="phone">联系电话</th>
        <th field="email">电子邮件</th>
        <th field="address">地址</th>
        <th field="idcard">身份证号码</th>
        <th field="remarks">备注信息</th>

    </tr>
    </thead>
</table>
<div id="tb">
    <div>
        <a href="javascript:openCustomerAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <%--<a href="javascript:openCustomerModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit"
           plain="true">修改</a>
        <a href="javascript:deleteCustomer()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>--%>
    </div>
    <div>
        &nbsp;姓名:<input type="text" id="usernameSearch" name="username" style="width:100px"
                        onkeydown="if(event.keyCode==13) searchCustomer()"/>
        &nbsp;单位:<input type="text" id="companySearch" name="company" style="width:100px"
                        onkeydown="if(event.keyCode==13) searchCustomer()"/>
        &nbsp;地址:<input type="text" id="addressSearch" name="address" style="width:100px"
                        onkeydown="if(event.keyCode==13) searchCustomer()"/>
        &nbsp;电话:<input type="text" id="phoneSearch" name="phone" style="width:100px"
                        onkeydown="if(event.keyCode==13) searchCustomer()"/>

        <a href="javascript:searchCustomer()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
    </div>
</div>
<div id="dlg" class="easyui-dialog" style="padding: 10px 20px;width: 320px;height: 420px;"
     closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>用户名称:<input type="text" name="username"
                                                                                     id="username"
            /></span></div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>职位职级:<input type="text" name="positionlevel"
                                                                                     id="positionlevel"/></span>
            </div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>电话号码:<input type="text" name="phone"
                                                                                     id="phoneNumber"/></span></div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>电子邮件:<input type="text" name="email"
                                                                                     id="email1"/></span></div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>证件号码:<input type="text" name="idcard"
                                                                                     id="idcard1"/></span></div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>公司名称:<input type="text" name="company"
                                                                                     id="companyName"/></span></div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;地&nbsp;&nbsp;&nbsp;址:<input
                    type="text" name="address"
                    id="address1"/></span></div>
        </div>
        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;别:<select
                    id="sex1" name="sex"
                    style="width: 154px;"
                    editable="false"
                    panelHeight="auto">
	 						<option value="">请选择客户性别</option>
	 						<option value="男">男</option>
                            <option value="女">女</option>
            </select></span></div>
        </div>

        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;类&nbsp;&nbsp;&nbsp;型:<select
                    id="type1" name="type"
                    style="width: 154px;"
                    editable="false"
                    panelHeight="auto">
	 						<option value="">请选择客户类型</option>
	 						<option value="供应商">供应商</option>
	 						<option value="大客户">大客户</option>
	 						<option value="普通客户">普通客户</option>
	 						<option value="潜在客户">潜在客户</option>
	 						<option value="其他">其他</option>
	 					</select></span></div>
        </div>

        <div style="float: left">
            <div style="float: left;font-size: 20px;width: 278px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;备&nbsp;&nbsp;&nbsp;注:<textarea
                    style="margin-top: 5px;" rows="1"
                    cols="24" name="remarks"
                    id="remarks"></textarea></span>
            </div>
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:saveCustomer()" class="easyui-linkbutton" iconCls="icon-ok" id="saveBtn">保存</a>
    <a href="javascript:closeCustomerDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
<script type="text/javascript">


    var url;
    //var id;

    //清空文本框的值
    function resetValue() {
       // alert("===清空文本框的值===")
        $("#username").val("");//用户名
        $("#companyName").val("");//公司名称
        $("#phoneNumber").val("");//联系方式
        $("#email1").val("");//客户邮箱
        $("#address1").val("");//客户住址
        $("#idcard1").val("");//身份证号码
        $("#remarks").val("");//备注
        $("#positionlevel").val("");//职位级别
        $("#sex1").get(0).selectedIndex = 0;//性别
        $("#type1").get(0).selectedIndex = 0;//客戶类型
        //$("#sex1").combobox("setValue", "请选择客户性别");//性别
        //$("#type1").combobox("setValue", "请选择客户类型");//客戶类型
    }

    function openCustomerAddDialog() {
        $("#dlg").dialog("open").dialog("setTitle", "添加客户信息");
        resetValue();
        url = "/customer/save";
    }

    function saveCustomer() {
        var user = $("#username").val().trim();
        var company = $("#companyName").val().trim()
        var position = $("#positionlevel").val().trim()
        var address = $("#address1").val().trim()
        var idcard = $("#idcard1").val().trim()
        var phone = $("#phoneNumber").val().trim()
        var emailValue = $("#email1").val().trim();
        var sex = $("#sex1").val()
        var type = $("#type").val()
        $("#fm").form("submit", {
            url: '/customer/save',
            onSubmit: function () {
                if (user === "") {
                    $.messager.alert("系统提示", "请输入客户名称");
                    return false;
                }
                if (company === "") {
                    $.messager.alert("系统提示", "请输入客户公司名称");
                }
                if (position === "") {
                    $.messager.alert("系统提示", "请输入客户职位级别");
                    return false;
                }
                if (sex === "") {
                    $.messager.alert("系统提示", "请输入客户性别");
                }
                if (type === "") {
                    $.messager.alert("系统提示", "请输入客户类型");
                    return false;
                }
                if (address === "") {
                    $.messager.alert("系统提示", "请输入客户地址");
                    return false;
                }
                if (phone === "") {
                    $.messager.alert("系统提示", "请输入客户电话号码");
                    return false
                } else {
                    var phoneReg = /^1[3-578]\d{9}$/;
                    if (!phoneReg.test(phone)) {
                        $.messager.alert("系统提示", "输入的号码不符合手机号码格式！！！");
                        return false;
                    }
                }

                if (emailValue === "") {
                    $.messager.alert("系统提示", "请输入客户电子邮件");
                    return false;
                } else {
                    var mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
                    if (!mailReg.test(emailValue)) {
                        $.messager.alert("系统提示", "输入的邮箱不符合格式！！！");
                        return false;
                    }
                }

                if (idcard === "") {
                    $.messager.alert("系统提示", "请输入客户身份证");
                    return false
                } else {
                    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
                    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if (!reg.test(idcard)) {
                        $.messager.alert("系统提示", "输入的身份证不符合格式！！！");
                        return false;
                    }
                }
                return $(this).form("validate");
            },
            success: function (result) {
                var result = eval('(' + result + ')');
                if (result.success) {
                    $.messager.alert("系统提示", result.message);
                    resetValue();
                    $("#dlg").dialog("close");
                    $("#dg").datagrid("reload");
                } else {
                    $.messager.alert("系统提示", result.message);
                    return;
                }
            }
        });
    }

    function searchCustomer() {
        $("#dg").datagrid('load', {
            "username": $("#usernameSearch").val(),
            "company": $("#companySearch").val(),
            "address": $("#address1").val(),
            "phone": $("#phoneNumber").val()
        });
    }

    function closeCustomerDialog() {
        $("#dlg").dialog("close");
        resetValue();
    }

</script>
</body>

